<template>
  <div class="companyLogin">
    <h1 class="title">企业登录</h1>
    <div class="pwd">
      <el-form :model="pwdForm" :rules="pwdFormRules" ref="pwdFormRef" class="pwd_form">
        <el-form-item prop="phone">
          <el-input placeholder="用户名" v-model="pwdForm.phone">
            <div slot="prefix" class="phone_icon"></div>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="密码" @keyup.enter.native="login('pwdFormRef')" type="password" v-model="pwdForm.password">
            <div slot="prefix" class="pwd_icon"></div>
          </el-input>
        </el-form-item>
      </el-form>
      <!-- <div class="agreement clearfloat">

        <el-button type="text" class="fr registered" @click="register">立即注册</el-button>
      </div> -->
      <el-button type="primary" @click="login('pwdFormRef')" class="login" :disabled="!isRead" v-no-more-click:3000>登录</el-button>
    </div>
  </div>
</template>

<script>
import aes from "~/util/aes.js";
export default {
  data () {
    var validatePhone = function(rule, value, callback) {
      if (value === '') {
        callback(new Error('请输入用户名'));
      } 
      // else if (!(/^1[3456789]\d{9}$/.test(value))) {
      //   callback(new Error('请输正确的手机号'));
      // } 
      else {
        callback();
      }
    }
    return {
      pwdForm: {
        phone: '',
        password: ''
      },
      pwdFormRules: {
        phone: [
          { required: true, validator: validatePhone, trigger: 'change' }
        ],
        password: [
          { required: true,  message: "请输入密码", trigger: 'change' }
        ]
      },
      isRead: true
    }
  },
  methods: {
    // 密码登录
    login (formName) {
      this.$refs[formName].validate((valid) => { 
        if (valid) {
          let params = {
            name: this.pwdForm.phone,
            password: this.pwdForm.password,
            guard: 'company'
          }
          this.loginPost(params)
        } else {
          return false
        }
      })
      
    },
    loginPost (params) {
      this.$axios.post('/api/company/login', params).then( res => {
        if (res.data.code == 200) {
          this.setLoginStatus(res.data.data)
          this.$router.push('/company/home')
        } else {
          this.$alert(res.data.message, '提示', {
            confirmButtonText: '确定',
            center: true,
            type: 'warning',
            callback: action => {
            }
          })
        }
      })
    },
    // 设置登录状态
    setLoginStatus (data) {
      this.$cookies.remove("agent");
      this.$cookies.set("token", data.token);
      this.$store.commit("setToken", data.token);
      this.$axios.defaults.headers.common["Authorization"] =
        "Bearer " + data.token;
      this.$cookies.set(
        "user",
        aes.Encrypt(JSON.stringify(data.user))
      );
      this.$store.commit("setUser", data.user);
    },
  }
}
</script>

<style lang='less'>
  .companyLogin {
    width:549px;
    height: 340px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background:rgba(255,255,255,1);

    .title {
      text-align: center;
      margin: 20px 0 30px 0;
    }

    .el-form {
      width: 390px;
      margin: 45px auto 10px;

      .el-form-item {
        margin-bottom: 30px;
        position: relative;
        
      }
      .el-input {
        .el-input__inner {
          padding-left: 58px;
        }
        .el-input__prefix {
          left: 20px;
        }
      }
    }
    .pwd {
      .pwd_form {
        .el-form-item:last-child {
          margin-bottom: 10px;
          .el-form-item__error {
            padding-top: 1px;
          }
        }
        .phone_icon {
          width:16px;
          height:26px;
          background:url('../../assets/img/图标.png') no-repeat;
          background-position:-405px -287px;
          margin-top: 6px;
        }
        .pwd_icon {
          width:17px;
          height:26px;
          background:url('../../assets/img/图标.png') no-repeat;
          background-position:-458px -319px;
          margin-top: 6px;
        }
      }
    }
    .login {
      width: 390px;
      margin: 30px auto 0;
      display: block;
    }
  }
</style>